<!DOCTYPE html>
<html lang="en">

<!--
  Author：蓝田_Loto
  Date：2020-01-03 15:50
  PageName：a_checkBoxSelect.html
  Function：复选框的全选和全不选
-->

<head>
    <meta charset="UTF-8">
    <title>复选框的全选和全不选</title>

    <script type="text/javascript">
        function checkAll() {
            // 1.获取编号前面的复选框
            const checkAllEle = document.getElementById("checkAll");

            // 2.对编号前面复选框的状态进行判断
            let checkOnes;
            if (checkAllEle.checked === true) {
                // 3.获取下面所有的复选框
                checkOnes = document.getElementsByName("checkOne");

                // 4.对获取的所有复选框进行遍历
                for (let i = 0; i < checkOnes.length; i++) {
                    // 5.拿到每一个复选框，并将其状态置为选中
                    checkOnes[i].checked = true;
                }
            } else {
                // 6.获取下面所有的复选框
                checkOnes = document.getElementsByName("checkOne");
                // 7.对获取的所有复选框进行遍历
                for (let j = 0; j < checkOnes.length; j++) {
                    // 8.拿到每一个复选框，并将其状态置为未选中
                    checkOnes[j].checked = false;
                }
            }
        }
    </script>
</head>

<body>

<table border="1" width="500" height="50" align="center">
    <caption></caption>

    <thead>
    <tr>
        <td colspan="4">
            <input type="button" value="添加"/>
            <input type="button" value="删除"/>
        </td>
    </tr>

    <tr>
        <th scope="col"><label><input type="checkbox" onclick="checkAll()" id="checkAll"/></label></th>
        <th scope="col">编号</th>
        <th scope="col">姓名</th>
        <th scope="col">年龄</th>
    </tr>
    </thead>

    <tbody>
    <tr>
        <td><label><input type="checkbox" name="checkOne"/></label></td>
        <td>1</td>
        <td>张三</td>
        <td>22</td>
    </tr>

    <tr>
        <td><label><input type="checkbox" name="checkOne"/></label></td>
        <td>2</td>
        <td>李四</td>
        <td>25</td>
    </tr>

    <tr>
        <td><label><input type="checkbox" name="checkOne"/></label></td>
        <td>3</td>
        <td>王五</td>
        <td>27</td>
    </tr>

    <tr>
        <td><label><input type="checkbox" name="checkOne"/></label></td>
        <td>4</td>
        <td>赵六</td>
        <td>29</td>
    </tr>

    <tr>
        <td><label><input type="checkbox" name="checkOne"/></label></td>
        <td>5</td>
        <td>田七</td>
        <td>30</td>
    </tr>

    <tr>
        <td><label><input type="checkbox" name="checkOne"/></label></td>
        <td>6</td>
        <td>汾九</td>
        <td>20</td>
    </tr>
    </tbody>
</table>
</body>
</html>